<template>
    <div>
        测试页面todo
        <p id="p1">({{text}})持续时间：{{ continueTime }}</p>
        <p>当前位置:（{{ clientX }}，{{ clientY }}）</p>
        <p>鼠标点击与否:{{ mouseClicked }}</p>
        <!-- <iframe  style="border:0px" type="text/x-scriptlet" :data="domTest" width=100% height=150></iframe > -->
        <!-- <div v-html="domTest"></div> -->
        <iframe id="ifm" src="http://127.0.0.1:8070/" width="1000" height="600" frameborder="0">
          <p>您的浏览器不支持iframe元素。</p>
        </iframe>
        {{ domTest }}
    </div>
</template>

<script>
// import { onMounted } from 'vue'; // 引入需要的
// import jsonp from 'jsonp';
export default {
  name: 'testPage',
  props: {
    msg: String
  },
  data(){
    return{
      keyName:"（按键名称）",
      keyName2:"（按键名称）",
      clientX:0,
      clientY:0,
      mouseClicked:false,
      text:"",
      continueTime:'',
      domTest:"dom为空"
    }
  },
  components:{
    // onMounted
  },
  mounted() {             
    console.log('mounted!') ;
    var that = this;

    function mousemove(event) {
      // console.log(
      //     'pageX: ', event.pageX, 'pageY: ', event.pageY,
      //     'clientX: ', event.clientX, 'clientY:', event.clientY)
      that.clientX = event.clientX;
      that.clientY = event.clientY;

    }

    // function mouseEvent(event){
    //   event = event || window.event;  //标准化事件对象
    //   // event.value = (event.type);  //获取当前事件类型
    //   // console.log(event);
    //   that.keyName2 = event.type;
    //   that.mouseClicked = true;
    //   console.log(event);
    // }

    window.addEventListener('mousemove', mousemove);

    // window.addEventListener('mouseout ', mouseEvent);
    // window.addEventListener('mousedown', mouseEvent);
    // window.addEventListener('mouseup ', mouseEvent);
    // window.addEventListener('click ', mouseEvent);
    // window.addEventListener('dblclick ', mouseEvent);

    var p1 = document.getElementById('p1');
    var timer;
    var showTag = true;
    p1.addEventListener('mousemove', (event)=>{
      that.continueTime = "鼠标移动上来了";
      if(showTag){
        timer = setTimeout(function(){
          that.continueTime = "停留够时间了";
        },1500);
      } 
      showTag = false;
      
      that.text = '鼠标在我这里:('+event.clientX+','+event.clientY+')';
    });
    p1.addEventListener('mouseout', (event)=>{
      clearTimeout(timer);
      that.continueTime = "鼠标没在元素上"
      showTag = true;
      that.text = '鼠标已移出'+event.type;
    });

    //浏览器信息
    // function BrowserInfo() {
    //     var userLanguage = navigator.userLanguage;     // 用户在自己的操作系统上设置的语言（火狐没有）  
    //     var userAgent = navigator.userAgent;           //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform  
    //     var systemLanguage = navigator.systemLanguage; // 用户操作系统支持的默认语言（火狐没有）
    //     var info = "";
    //     info += "浏览器属性信息： " + userAgent + "\r\n";
    //     info += "用户设置的操作系统语言： " + userLanguage + "\r\n";
    //     info += "操作系统支持的默认语言： " + systemLanguage + "\r\n";
    //     return info;
    // }
    console.log("浏览器信息：");
    console.log(navigator);
    var el = document.createElement('html');

    // this.$http.get('/getDevice')
    this.$http.get('http://127.0.0.1:8080/getDevice')//这里的地址，不用在意端口或域名，应注意避免跨域，实际的请求，会在被代理转出去。这里我实际进行的请求是http://127.0.0.1:8070
      .then(function (response) {
        // 处理成功情况
        that.domTest = response.data;
        el.innerHTML = response.data;
        console.log(el)
        // console.log(response);
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
      .finally(function () {
        // 总是会执行
      }
    );
    // var frm = document.getElementById('ifm');
    // document.getElementById('ifm').onload = function(){
    //  //加载完成
    //   // document.getElementById('ifm')//获取到iframe
    //   // .contentWindow//获取到iframe的window
    //   // .document//获取到iframe的document
    //   // .getElementById('ifmh1')//正常获取元素
    //   // .style.color = "orange";//修改样式
    // console.log(frm.contentWindow.document); 
      
    // };
    // jsonp('http://127.0.0.1:8070', null, (err, data) => {
    //   if (err) {
    //     console.error(err.message);
    //   } else {
    //     console.log(data);
    //   }
    // });
  },  
  methods:{

  }
}
</script>

<style scoped>
#p1{
  margin: 30px;
  border: #888888;
  border-width: 2;
}
#p1:hover {
  opacity: 0.5;
  box-shadow: 1px 1px 2px #888888;
  font-size: 25px;
}
iframe{
  body{
    background-color: #888888 !important;

  }
}
</style>